<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/detail.css">
</head>

<body>
    <!-- 商品详情页 -->
    <div class="color">
        <div class="top contain">
            <ul class="left">
                <li>帮助中心</li>
                <li>收藏</li>
                <li>360官网</li>
                <li>360智慧生活</li>
            </ul>
            <ul class="right">
                <li>登录</li>
                <li>注册</li>
                <li class="tupian">
                    <span></span>
                </li>
            </ul>
        </div>
    </div>
    <div class="center">
        <div class="shang contain">
            <ul class="left">
                <li>
                    <a href="../htnl/cart.html">
                        <img src="https://p1.qhimg.com/t0102789b8d00c3dfce.png" alt=""></a>
                </li>
                <li>新品推荐</li>
                <li>热卖榜单</li>
            </ul>
            <div class="right">
                <div class="xia">
                    <span>
                        <i></i>
                        <input type="text"></span>
                </div>
                <ul>
                    <li>记录仪</li>
                    <li>摄像机</li>
                    <li>路由器</li>
                    <li>耳机</li>
                    <li>扫地机</li>
                    <li>智能手表</li>
                </ul>
            </div>
        </div>
        <div class="xian">
            <div class="ul contain">
                <div class="top">
                    <a href="../htnl/list.html">
                        <span></span>
                        <p>全部...</p>
                    </a>
                </div>
                <ul>
                    <li>家庭安防</li>
                    <li>安全路由</li>
                    <li>智能手表</li>
                    <li>汽车用品</li>
                    <li>扫地机器人</li>
                    <li>影视生活</li>
                    <li>生态产品</li>
                </ul>
                <ol></ol>
            </div>
            <span class="heng">
                <hr>
            </span>
        </div>
    </div>
    <div class="wai contain">
        <div class="box" id="box">
            <!-- 展示图片的盒子   480 480 -->
            <div class="show">
                <img src="https://p1.ssl.qhimg.com/t01480f118d233044a6.webp" alt="">
                <!-- 遮罩层  300 300 -->
                <div class="mask"></div>
            </div>

            <!-- 切换选项的盒子  88 88 -->
            <div class="list">
                <img class="active" src="https://p1.ssl.qhimg.com/dr/90_0_85/t01480f118d233044a6.webp"
                    data-show="https://p1.ssl.qhimg.com/t01480f118d233044a6.webp"
                    data-enlarge="https://p1.ssl.qhimg.com/t01480f118d233044a6.webp" alt="">
                <img src="https://p4.ssl.qhimg.com/dr/90_0_85/t014ca330e316acc971.webp"
                    data-show="https://p4.ssl.qhimg.com/t014ca330e316acc971.webp"
                    data-enlarge="https://p4.ssl.qhimg.com/t014ca330e316acc971.webp" alt="">
            </div>

            <!-- 放大的盒子  816 816 -->
            <div class="enlarge">
                <img src="https://p1.ssl.qhimg.com/t01480f118d233044a6.webp" alt="">
            </div>
        </div>
        <div class="right">
            <!-- <div class="top">360 自动出泡洗手机 穹灰蓝</div>
            <div class="pri">
                <span>价格：</span>
                <p class="newpri">￥ 99.00</p>
                <p class="oldpri">￥ 129</p>
            </div>
            <div class="bottom">
                <button class="mai">立即购买</button>
                <button class="liu">加入购物车</button>
            </div> -->
            <div class="top">
                <div class="shang">360 自动出泡洗手机 穹灰蓝</div>
                <div class="zhong">极速出泡有效抑菌环保循环充电</div>
                <div class="xia"><a href="">高清双摄、20米游泳级防水等智能手表，点击查看>></a></div>
            </div>
            <div class="center">
                <div class="pri">
                    <span>价格</span>
                    <div class="newpri">￥ 99.00</div>
                    <div class="oldpri">￥ 129</div>
                </div>
                <div class="quan">
                    <span>领券</span>
                    <p><a href="">满99.00减5.00元</a></p>
                </div>
                <div class="cuxiao">
                    <span>促销</span>
                    <p>直降</p>
                    <i>立减30.00元</i>
                </div>
            </div>
            <div class="warn">
                <span></span>
                <p>物流公告:受疫情影响，北京、上海、黑龙江、吉林、辽宁、河北、江西、江苏、四川、甘肃、青海、新疆、宁夏回族自治区等部分地区暂缓发货。</p>
            </div>
            <div class="bottom">
                <div class="shang">
                    <span>分类</span>
                    <p>洗手机套装(穹灰蓝)</p>
                </div>
                <div class="shuliang">
                    <span class="left disable">&lt;</span>
                    <input type="text" value="1">
                    <span class="right">&gt;</span>
                </div>
                <div class="jifen">
                    <span>积分</span>
                    <p>购买可获得99积分</p>
                </div>
                <div class="xia">
                    <button class="mai">立即购买</button>
                    <button class="jia">加入购物车</button>
                    <span></span>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/detail.js"></script>
    <script>
        // const goodsId = window.sessionStorage.getItem('goodsId')
        // console.log(`输出${ goodsId }的详细信息`)
        const en = new Enlarge('#box')
        console.log(en)
    </script>
</body>

</html>